import Vue from "vue";
import Vuex from 'vuex'
import { INCREMENT } from "./mutations-type";
//1.安装插件
Vue.use(Vuex)

//2.创建对象
const moduleA = {
    state: {
        name: 'lucy'
    },
    mutations: {
        updateName(state, payload) {
            state.name = payload
        }
    },
    getters: {
        fullname(state) {
            return state.name + '11111'
        },
        fullname2(state, getters) {
            return getters.fullname + '22222222'
        },
        // 在模块里getters可以有三个参数，rootsate是根模块
        fullname3(state, getters, rootstate) {
            return getters.fullname2 + rootstate.counter
        }
    },
    actions: {
        aUpdateName(context) {
            setTimeout(() => {
                context.commit('updateName', 'wangwu')
            }, 1000);
        }
    }
}
const store = new Vuex.Store({
        state: {
            // states:存储了项目的公共数据/状态
            counter: 1000,
            students: [
                { id: 110, name: 'jackson', age: 29 },
                { id: 220, name: 'wang', age: 13 },
                { id: 330, name: 'ccj', age: 21 },
            ],
            info: {
                name: 'kobe',
                age: 40,
                height: 188
            }
        },
        actions: {
            // 用来提交Mutation，而不是直接改变状态，异步操作
            // context上下文
            // aUpdateInfo(context, payload) {
            //     setTimeout(() => {
            //         //错误代码，不能在这里修改state
            //         // context.state.info='lisa'
            //         // 如果要异步修改，只能这样
            //         context.commit('updateInfo')
            //         payload.message
            //         payload.success()
            //     }, 1000);
            // }
            aUpdateInfo(context, payload) {
                return new Promise((resolve, reject) => {
                    setTimeout(() => {
                        context.commit('updateInfo')
                        resolve(111)
                    }, 1000);
                })
            }
        },
        mutations: {
            // 是唯一一个改变store状态的方法，且必须是同步函数
            [INCREMENT](state) {
                state.counter++
            },
            decrement(state) {
                state.counter--
            },
            incrementCount(state, payload) {
                state.counter += payload.count
            },
            decrementCount(state, count) {
                state.counter += count
            },
            addStudent(state, stu) {
                state.students.push(stu)
            },
            updateInfo(state) {
                // setTimeout(() => {
                //     state.info.name = 'lisa'
                // }, 1000);
                // state.info.name = 'susan'
                // 提前在store中初始化好所需要的属性， 所有这里设置的address不会显示
                // state.info['address'] = '洛杉矶'
                // 用下面的方式让他显示
                Vue.set(state.info, 'address', '洛杉矶')
                    // delete state.info.age //做不到响应式
                    // Vue.delete(state.info, 'age') //响应式
            }
        },
        getters: {
            powerCounter(state) {
                return state.counter * state.counter
            },
            more20stu(state) {
                return state.students.filter(s => s.age >= 20)
            },
            more20stulen(state, getters) { //getters也可以作参数
                return getters.more20stu.length
            },
            moreAgestu(state) {
                return age => state.students.filter(s => s.age >= age)
            }
        },
        //允许将单一的store拆分为多个store，且保存在单一状态树中
        modules: {
            a: moduleA
        }
    })
    //3.导出store对象
export default store